<template>
  <div id="charts4"></div>
</template>

<script>
import ecStat from 'echarts-stat';
export default {
    props: {
        data: {
            type: Array,
            default: function () {
                return [];
            },
        },
        title: {
            type: String,
            default: ''
        },
        xTitle: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
    data() {
        return {
            myChart: '',
            option: {
                title: [{
                    left: 'center',
                    text: this.title,
                    textStyle: {
                        color: '#FFF',
                    }
                }],
                xAxis: {
                    type: 'category',
                    data: this.xTitle,
                    name: '日期',
                    nameTextStyle:{
                        color: "white"
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量/个',
                    nameTextStyle:{
                        color: "white"
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [{
                    data: this.data,
                    itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color:'#67C23A'  
                            }  
                        }  
                    },
                    type: 'line',
                    smooth: true
                }],
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                }
            }
        }
    },
    mounted() {
        this.initEcharts()
    },
    methods: {
        initEcharts () {
            // 新建一个promise对象
            console.log(this.data)
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                //	此dom为echarts图标展示dom
                this.$echarts.registerTransform(ecStat.transform.regression);
                let chartDom = document.getElementById('charts4');
                this.myChart = this.$echarts.init(chartDom);
                if(this.option) {
                    this.myChart.setOption(this.option);
                }
                 console.log(this.xTitle)
            })
        }
    }
}
</script>

<style scoped>
#charts4 {
    padding-top: 10px;
    width: 100%;
    height: 390px;
    background: url('../../assets/image/bg.jpg');
}
</style>